import React from 'react'
import { connect } from 'dva'
import { Row,Col } from 'antd'


/**
 * StockProfitCharts 股票盈亏统计图
 */
import {IECharts} from '../../../components'
const StockProfitCharts = ({ 
    data 
   }) => {
	console.log('StockProfitCharts',data)
    const myProps = {
			option: {
				tooltip: {
					trigger: 'axis',
					formatter: (params)=>{
						const thisData=data.find((item,index)=>item.symbol===params[0].name)
						const {stockCode,pnl,ratio}=thisData
						return `${stockCode}:${pnl}(${Math.signFigures(ratio * 100)}%)`
						
					},
					axisPointer: {            // 坐标轴指示器，坐标轴触发有效
						type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
					}
				},
				grid: {
					top:'5%',
					left: '3%',
					right: '4%',
					bottom: '5%',
					containLabel: true
				},
				xAxis: [
					{
						type: 'value',
						name:'金额',
						axisLine:{
							symbol:['none','arrow']
						}
						
					}
				],
				yAxis: [
					{
						type: 'category',
						axisTick: { show: false },
						axisLine:{
							symbol:['none','arrow']
						},
						data: data.map(item => item.symbol)
					}
				],
				series: [
					{
						name: '收益',
						type: 'bar',
						itemStyle: {
							normal: {
								color: (params) => params.value > 0 ? 'rgb(180, 0, 0)':'rgb(0, 180, 0)'
							},
						},
						label: {
							normal: {
								show: true,
								position: 'right'
							}
						},
						data: data.map(item => item.pnl)
					}
				]
			}
		}
      return (
        <div style={{ height: data.length*40 }}>
				<IECharts {...myProps} resizable={true} />
			</div>
      )
   }

   

/**
 * [StockProfit 股票盈亏统计]
 * 引用组件 
 * StockProfitCharts 股票盈亏统计图
 */
class StockProfit extends React.Component {
  state={
    data:this.props.stockYield
  }

  componentDidMount() {
    this.fetchData(this.props)
  }
  componentWillReceiveProps(nextProps) {
    if((nextProps.begindate!==this.props.begindate)||(nextProps.enddate!==this.props.enddate)||(nextProps.trader!==this.props.trader)){
      this.fetchData(nextProps)
    }
    if(nextProps.stockYield!==this.props.stockYield){
      this.setState({
        data:nextProps.stockYield
      })
    }
  }
  fetchData=(props)=>{

    this.props.dispatch({
      type: `dailyReplay/getStockYield`,
      payload:props
    })
  }
  render() {
    const { data } = this.state
    
    return (
      <Row>
        <Col>
          <StockProfitCharts data={data} />
        </Col>
      </Row>
    )
  }
}

StockProfit.defaultProps={
  begindate: '2018-03-22',
  enddate: '2018-03-22',
  trader: 'total',
  stockYield:[]
}

export default connect()(StockProfit)
